<template>
  <BaseDialog :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存" v-model="isShow" :title="title">
    <el-form
        ref="formRef"
        :model="state.dataForm"
        :rules="rules"
        label-width="80px"
        @submit="save"
    >
      <el-row>
        <el-col :span="11">
          <el-form-item label="组织名称" prop="orgName">
            <el-input placeholder="请输入组织名称" v-model="state.dataForm.orgName" />
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="所属组织" prop="pid">
            <SelectOrg enabledSwitch placeholder="请选择所属组织" v-model="state.dataForm.pid"></SelectOrg>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="所属公司" prop="comId">
            <SelectOrg enabledSwitch isCompany placeholder="请选择所属公司" v-model="state.dataForm.comId"></SelectOrg>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="排序" prop="orderNum">
            <el-input-number v-model="state.dataForm.orderNum" :min="1" :max="999999" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col  :span="11">
          <el-form-item label="组织类型" prop="type">
            <BaseRadioButton dict="org_type" v-model="state.dataForm.type"></BaseRadioButton>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="是否启用" prop="enabled">
            <BaseRadioButton dict="enable_dict" v-model="state.dataForm.enabled"></BaseRadioButton>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col  :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" placeholder="请输入备注" v-model="state.dataForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </BaseDialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {OrgModel} from "/@/api/system/model/OrgModel";
import {insertOrg, updateOrg} from "/@/api/system/OrgApi";
const emit = defineEmits(['loadTree', 'load'])
const state = reactive({
  dataForm:{
    orgName: '',
    type: 2,
    pid: '',
    orgId: '',
    orderNum: 1,
    comId: '',
    enabled: 1,
    remark: ''
  } as OrgModel
})
const rules = {
  orgName: [
    { required: true, message: '组织名称不能为空', trigger: 'blur' },
    { min: 1, max: 64, message: '组织名称长度为1到64个字符',trigger: 'blur'}
  ],
  comId: [
    { required: true, message: '所属公司不能为空', trigger: 'blur' }
  ],
  pid: [
    { required: true, message: '所属组织不能为空', trigger: 'blur' }
  ],
  remark: [
    { min: 1, max: 255, message: '组织名称长度为1到255个字符',trigger: 'blur'}
  ]
}
const formRef = ref()
const loading = ref(false)
const isShow = ref(false)
const title = ref("")
const init = (titleValue: string,data: OrgModel) => {
  if(data){
    state.dataForm = data
  }
  title.value = titleValue
  isShow.value = true
}
/**
 * 保存组织
 */
const save = async () => {
  await formRef.value.validate()
  loading.value = true
  if(state.dataForm.orgId){
    await updateOrg(state.dataForm,()=>{
      loading.value = false
    })
  }else{
    await insertOrg(state.dataForm,()=>{
      loading.value = false
    })
  }
  emit('loadTree')
  close()
}

const close = () => {
  state.dataForm = {
    orgName: '',
    type: 2,
    pid: '',
    orgId: '',
    orderNum: 1,
    comId: '',
    enabled: 1,
    remark: ''
  }
  isShow.value = false
}
defineExpose({init})
</script>

<style scoped>

</style>